<template>
    <view :class="[ 'uni-row', typeClass , justifyClass, alignClass, ]" :style="{
        marginLeft:`${Number(marginValue)}rpx`,
        marginRight:`${Number(marginValue)}rpx`,
    }">
        <slot></slot>
    </view>
</template>

<script>
    const ComponentClass = 'uni-row';
    const modifierSeparator = '--';
    /**
     * Row    布局-行
     * @description    流式栅格系统，随着屏幕或视口分为 24 份，可以迅速简便地创建布局。
     * @tutorial    https://ext.dcloud.net.cn/plugin?id=3958
     *
     * @property    {gutter} type = Number 栅格间隔
     * @property    {justify} type = String flex 布局下的水平排列方式
     *                         可选    start/end/center/space-around/space-between    start
     *                         默认值    start
     * @property    {align} type = String flex 布局下的垂直排列方式
     *                         可选    top/middle/bottom
     *                         默认值    top
     * @property    {width} type = String|Number nvue下需要自行配置宽度用于计算
     *                         默认值 750
     */


    export default {
        name: 'uniRow',
        componentName: 'uniRow',
        // #ifdef MP-WEIXIN
        options: {
            virtualHost: true // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现，可使用flex布局
        },
        // #endif
        props: {
            type: String,
            gutter: Number,
            justify: {
                type: String,
                default: 'start'
            },
            align: {
                type: String,
                default: 'top'
            },
            // nvue如果使用span等属性，需要配置宽度
            width: {
                type: [String, Number],
                default: 750
            }
        },
        created() {
            // #ifdef APP-NVUE
            this.type = 'flex';
            // #endif
        },
        computed: {
            marginValue() {
                // #ifndef APP-NVUE
                if (this.gutter) {
                    return -(this.gutter / 2);
                }
                // #endif
                return 0;
            },
            typeClass() {
                return this.type === 'flex' ? `${ComponentClass + modifierSeparator}flex` : '';
            },
            justifyClass() {
                return this.justify !== 'start' ? `${ComponentClass + modifierSeparator}flex-justify-${this.justify}` : ''
            },
            alignClass() {
                return this.align !== 'top' ? `${ComponentClass + modifierSeparator}flex-align-${this.align}` : ''
            }
        }
    };
</script>

<style lang="scss">
    $layout-namespace: ".uni-";
    $row:$layout-namespace+"row";
    $modifier-separator: "--";

    @mixin utils-clearfix {
        $selector: &;

        @at-root {

            /* #ifndef APP-NVUE */
            #{$selector}::before,
            #{$selector}::after {
                display: table;
                content: "";
            }

            #{$selector}::after {
                clear: both;
            }

            /* #endif */
        }

    }

    @mixin utils-flex ($direction: row) {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: $direction;
    }

    @mixin set-flex($state) {
        @at-root &-#{$state} {
            @content
        }
    }

    #{$row} {
        position: relative;
        flex-direction: row;

        /* #ifdef APP-NVUE */
        flex: 1;
        /* #endif */

        /* #ifndef APP-NVUE */
        box-sizing: border-box;
        /* #endif */

        // 非nvue使用float布局
        @include utils-clearfix;

        // 在QQ、字节、百度小程序平台，编译后使用shadow dom，不可使用flex布局，使用float
        @at-root {

            /* #ifndef MP-QQ || MP-TOUTIAO || MP-BAIDU */
            &#{$modifier-separator}flex {
                @include utils-flex;
                flex-wrap: wrap;
                flex: 1;

                &:before,
                &:after {
                    /* #ifndef APP-NVUE */
                    display: none;
                    /* #endif */
                }

                @include set-flex(justify-center) {
                    justify-content: center;
                }

                @include set-flex(justify-end) {
                    justify-content: flex-end;
                }

                @include set-flex(justify-space-between) {
                    justify-content: space-between;
                }

                @include set-flex(justify-space-around) {
                    justify-content: space-around;
                }

                @include set-flex(align-middle) {
                    align-items: center;
                }

                @include set-flex(align-bottom) {
                    align-items: flex-end;
                }
            }

            /* #endif */
        }

    }

    // 字节、QQ配置后不生效
    // 此处用法无法使用scoped
    /* #ifdef MP-WEIXIN || MP-TOUTIAO || MP-QQ */
    :host {
        display: block;
    }

    /* #endif */
</style>
